/* 04. blog details css here */
.blog_details_section{
    margin-bottom: 160px;
    @media #{$tablet-device}{
        margin-bottom: 80px;
    }
    @media #{$large-mobile}{
        margin-bottom: 60px;
    }
}

.blog_wrapper_details{
    & .container{
        max-width: 900px;
    }
}

.blog_details_title {
    padding: 95px 0 95px;
    @media #{$tablet-device}{
        padding: 36px 0 75px;
    }
    @media #{$large-mobile}{
        padding: 25px 0 58px;
    }
    & h2{
        font-size: 48px;
        line-height: 60px;
        font-weight: 600;
        margin-bottom: 31px;
        @media #{$desktop-device}{
            font-size: 40px;
            line-height: 50px;
        }
        @media #{$tablet-device}{
            font-size: 35px;
            line-height: 44px;
            margin-bottom: 25px;
        }
        @media #{$large-mobile}{
            font-size: 30px;
            line-height: 42px;
            margin-bottom: 16px;
        }
        @media #{$small-mobile2}{
            font-size: 22px;
            line-height: 33px;
            margin-bottom: 16px;
        }
    }
}
.blog_details_content{
    padding-top: 107px;
    @media #{$large-mobile}{
        padding-top: 55px;
    }
}
.blog_details_desc{
    margin-bottom: 68px;
    @media #{$large-mobile}{
        margin-bottom: 52px;
    }
    @media #{$small-mobile2}{
        text-align: center;
    }
    & h3{
        font-size: 24px;
        line-height: 36px;
        font-weight: 600;
        margin-bottom: 30px;
        @media #{$tablet-device}{
            font-size: 20px;
            line-height: 30px;
        }
        @media #{$large-mobile}{
            font-size: 18px;
            line-height: 28px;
            margin-bottom: 18px;
        }
    }
    & > p{
        font-size: 16px;
        line-height: 30px;
        color: #666666;
        margin-bottom: 31px;
        @media #{$large-mobile}{
            font-size: 14px;
            line-height: 25px;
            margin-bottom: 19px;
        }

    }
    & blockquote{
        padding-left: 100px;
        position: relative;
        margin: 55px 0 46px;
        @media #{$tablet-device}{
            padding-left: 60px;
            margin: 30px 0 31px;
        }
        @media #{$large-mobile}{
            padding-left: 30px;
            margin: 25px 0 20px;
        }
        &::before{
            position: absolute;
            content: "";
            width: 4px;
            height: 95px;
            background: $secondary_color;
            top: 0;
            left: 0;
        }
        & h4{
            font-size: 24px;
            line-height: 36px;
            margin-bottom: 30px;
            font-family: $libre;
            @media #{$tablet-device}{
                font-size: 20px;
                line-height: 30px;
                margin-bottom: 15px;
            }
            @media #{$large-mobile}{
                font-size: 18px;
                line-height: 28px;
                margin-bottom: 13px;
            }
        }
        & h5{
            font-size: 14px;
            line-height: 30px;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 0;
        }

    }
}

.blog_d_meta{
    & ul{
        & li{
            display: inline-block;
            font-size: 14px;
            line-height: 22px;
            color: #999999;
            position: relative;
            padding-right: 12px;
            margin-right: 12px;
            &:last-child{
                padding-right: 0;
                padding-right: 0;
                &::before{
                    display: none;
                }
            }
            &::before{
                position: absolute;
                content: "";
                width: 1px;
                height: 12px;
                background: #cccccc;
                right: 0;
                top: 50%;
                transform: translatey(-50%);
            }
            & a{
                font-weight: 600;
                color: #000000;
                &:hover{
                    color: $secondary_color;
                }
            }
            & span{
                font-weight: 600;
               color: #ff9900;
            }
        }
    }
}
.post_tags_social{
    margin-bottom: 70px;
    @media #{$tablet-device}{
        margin-bottom: 62px;
    }
    @media #{$large-mobile}{
        margin-bottom: 49px;
    }
}
.post_tags {
    margin-bottom: 24px;
    @media #{$large-mobile}{
        margin-bottom: 16px;
        
    }
    @media #{$small-mobile2}{
        flex-direction: column;
     }
    & span{
        font-size: 14px;
        line-height: 30px;
        font-weight: 600;
        margin-right: 8px;
    }
    & ul{
        @media #{$small-mobile2}{
           flex-wrap: wrap;
           justify-content: center;
        }
        & li{
            margin-right: 6px;
            &:last-child{
                margin-right: 0;
            }
            & a{
                font-size: 14px;
                line-height: 30px;
                color: #999999;
                &:hover{
                    color: $secondary_color;
                }
            }
        }
    }
}

.post__social{
    & span{
        font-size: 14px;
        line-height: 30px;
        font-weight: 600;
        margin-right: 12px;
   }
   & ul{
       & li{
           margin-right: 20px;
           &:last-child{
               margin-right: 0;
           }
           & a{
               font-size: 16px;
               color: #cccccc;  
               &:hover{
                color: $secondary_color;
               }
           }
       }
   }
}
.blog_navigation {
    padding-bottom: 90px;
    margin-bottom: 86px;
    @media #{$tablet-device}{
        padding-bottom: 72px;
        margin-bottom: 76px;
    }
    @media #{$large-mobile}{
        padding-bottom: 53px;
        margin-bottom: 57px;
    }
    & a{
        font-size: 24px;
        line-height: 36px;
        color: #999999;
        display: inline-block;
        margin-bottom: 5px;
        &:hover{
            color: $secondary_color;
        }
        @media #{$small-mobile2}{
            font-size: 19px;
            line-height: 22px;
        }
    }
    & span{
        display: block;
        font-size: 16px;
        line-height: 36px;
        font-weight: 600;
        @media #{$small-mobile2}{
            font-size: 15px;
            line-height: 27px;
        }
    }
    & ul{
        @media #{$small-mobile2}{
            flex-direction: column;
            text-align: center;
        }
        & li{
            &.previous{
                @media #{$small-mobile2}{
                    margin-bottom: 20px;
                }
                & a{
                    & i{
                        margin-right: 10px;
                    }
                }
            }
            &.next{
                & a{
                    & i{
                        margin-left: 10px;
                    }
                }
            }
        }
    }
}
.comments_box{
    margin-bottom: 75px;
    @media #{$large-mobile}{
        margin-bottom: 29px;
    }
   & .section_title {
        margin-bottom: 35px;
        @media #{$large-mobile}{
            margin-bottom: 30px;
        }
        @media #{$small-mobile2}{
            text-align: center;
        }
       & h2{
            font-size: 24px;
            line-height: 26px;
            font-weight: 600;
            @media #{$large-mobile}{
                font-size: 20px;
                line-height: 20px;
            }
       }
   }
    
}
.comment_list{
    overflow: hidden;
    margin-bottom: 40px;
    @media #{$small-mobile2}{
        flex-direction: column;
    }
    &:last-child{
        margin-bottom: 0;
    }
    & .comment_thumb{
        width: 70px;
        margin-right: 30px;
        @media #{$large-mobile}{
           margin-right: 20px;
        }
        @media #{$small-mobile2}{
            margin: 0 auto 20px;
        }
    }
    & .comment_meta {
        margin-bottom: 11px;
        @media #{$small-mobile2}{
            flex-direction: column;
        }
    }
    & .comment_content{
        width: calc(100% - 70px);
        background: #fff;
        padding: 14px 0 0 20px;
        position: relative;
        @media #{$small-mobile2}{
            flex-direction: column;
            width: 100%;
            margin-top: 20px;
            padding: 20px 17px 24px;
            text-align: center;
        }
        &::before{
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-right: 16px solid #fff;
            border-bottom: 7px solid transparent;
            left: -16px;
            top: 15px;
            @media #{$small-mobile2}{
                display: none;
            }
        }
        
        & h5{
            font-size: 16px;
            line-height: 30px;
            font-weight: 600;
            text-transform: capitalize; 
            margin-bottom: 8px;
            color: #333333;
            @media #{$large-mobile}{
               font-size: 16px;
                line-height: 20px;
            }
            @media #{$small-mobile2}{
                margin-bottom: 8px;
            }
            & span{
                font-size: 12px;
                color: #999999;
                font-weight: 400;
                text-transform: uppercase;
            }
        }
        & p{
            font-size: 14px;
            line-height: 24px;
            margin-bottom: 0;
            color: #666666;
        }
        & a{
            font-size: 12px;
            line-height: 18px;
            font-weight: 600;
            color: #0099cc;
            margin-top: 17px;
            display: inline-block;
            &:hover{
                color: $secondary_color;
            }
        }
    }
}


.comments_form{
    & .section_title{
        margin-bottom: 44px;
        @media #{$large-mobile}{
            margin-bottom: 30px;
        }
        @media #{$small-mobile2}{
            text-align: center;
        }
        & h2{
            font-size: 24px;
            line-height: 26px;
            font-weight: 600;
            @media #{$large-mobile}{
                font-size: 20px;
                line-height: 20px;
            }
        }
    }
}

.comments_form_input{
    margin-bottom: 15px;
    & label{
        font-size: 14px;
        line-height: 26px;
        color: #999999;
        display: block;
        margin-bottom: 4px;
        @media #{$large-mobile}{
            font-size: 13px;
            line-height: 17px;
        }
        & span{
            color: #ff3366;
        }
    }
    & input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: #999999;
    }
    & input::-moz-placeholder { /* Firefox 19+ */
        color: #999999;
    }
    & input:-ms-input-placeholder { /* IE 10+ */
        color: #999999;
    }
    & input:-moz-placeholder { /* Firefox 18- */
        color: #999999;
    }
    & input{
        color: #999999;
        border-bottom: 1px solid transparent !important;
        width: 100%;
        height: 35px;
        &:focus{
            color: #000000;
            border-bottom: 1px solid #000000 !important;
        } 
        &:focus::-webkit-input-placeholder{
            color: #000000;
            border-bottom: 1px solid #000000 !important;
        } 
        @media #{$tablet-device}{
            width: 265px;
        }
        @media #{$large-mobile}{
            width: 100%;
        }
    }
    & textarea{
        width: 100%;
        padding: 10px;
        height: 134px;
        color: #999999;
        border-bottom: 1px solid transparent !important;
        &:focus{
            color: #000000;
            border-bottom: 1px solid #000000 !important;
        } 
        &:focus::-webkit-input-placeholder{
            color: #000000;
            border-bottom: 1px solid #000000 !important;
        }
        @media #{$tablet-device}{
            height: 100px;
        }
        @media #{$large-mobile}{
            height: 100px;
        }
        @media #{$small-mobile2}{
            height: 7px;
        }
    }

    
}

.comments_form_inner{
    & button.btn.btn-link{
        margin-top: 50px;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 600;
        line-height: 50px;
        height: 50px;
        padding: 0 26px;
        @media #{$tablet-device}{
            margin-top: 20px;
        }
        @media #{$large-mobile}{
            margin-top: 10px;
            font-size: 13px;
            line-height: 45px;
            height: 45px;
            padding: 0 18px;
        }
        @media #{$small-mobile2}{
           margin-top: 0;
        }
    }
}
/*blog details css end*/



